<!-- 字母选择器 -->
<template>
	<view>
		<view class="letter-columns" id="letterColumns" ref="letterColumns">
			<view class="letter-columns-unit" :style="{
					'height': selectBox.height + 'px',
					'width': selectBox.height + 'px'
				}" :class="{
					'letter-columns-check': alphabeticUncheck == item,
				}" v-for="(item, alphabetic) in alphabeticList" :key="alphabetic" @touchstart.stop.prevent="touchstart($event, item)" @touchmove.stop.prevent="touchmove($event, item)" @touchend.stop.prevent="touchend($event, item)">
				{{ item }}
			</view>
		</view>
		<view class="appear" v-show="alphabeticUncheck">{{alphabeticUncheck}}</view>
		<scroll-view scroll-y="true" :scroll-into-view="intoView" :style="{ height: scrollToHeight, 'background-color': bgColor }">
			<slot name="content"></slot>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'alphabetic-list',
		props: {
			circularObject: {
				type: Array,
				default: () => {
					return new Array();
				}
			},
			scrollToHeight: {
				type: String,
				default: '100vh'
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			}
			// intoView:{
			// 	type: String,
			// 	default:''
			// }
		},
		data() {
			return {
				alphabeticList: ['#', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
				intoView: '',
				selectBox: {}, //选择方框
				alphabeticUncheck: '' //选中的
			};
		},
		watch: {},
		create() {

		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query
						.select('#letterColumns')
						.boundingClientRect(data => {
							this.selectBox.min = data.top;
							this.selectBox.max = data.bottom;
							this.selectBox.height = (data.bottom - data.top) / parseFloat(this.alphabeticList.length);
						})
						.exec();
				}, 100)
			},
			internalJump(item) {
				this.intoView = ''
				this.$nextTick(() => {
					this.intoView = item === '#' ? 'AA' : item;
				})
			},
			touchstart(e, item) {
				this.alphabeticUncheck = item
				this.internalJump(this.alphabeticUncheck);
			},
			touchmove(e) {
				// 获取当前鼠标位置距离索引列表顶部的位置
				let top = e.changedTouches[0].clientY - this.selectBox.min;
				// 计算当前鼠标位置应该在那个字符的位置
				let temp = parseInt(top / this.selectBox.height);
				// 如果超出了索引列表顶部的位置则置为第一个
				if (temp < 0) temp = 0;
				// 如果超出了索引列表底部的位置则置为最后一个
				if (temp > this.alphabeticList.length - 1) temp = this.alphabeticList.length - 1;
				// 当前选中
				this.alphabeticUncheck = this.alphabeticList[temp];
				// scroll-view移动
				this.internalJump(this.alphabeticUncheck);
			},
			touchend(e) {
				this.alphabeticUncheck = '';
			},
			format(data, showName) {
				let letterList = {};
				// 生成键名为A、B、C，键值为数组的集合
				this.alphabeticList.forEach(item => {
					letterList[item] = [];
				});
				data.forEach((item, index) => {
					const line = {
						name: item[showName],
						...item
					};
					const bear = this.$toPinYin(line.name).substr(0, 1).toUpperCase();
					if (!this.alphabeticList.includes(bear)) bear = '#';
					letterList[bear].push(line);
				});
				return letterList
			}
		}
	};
</script>

<style lang="scss" scoped>
	.letter-columns {
		// 修改height和top记得修改init里边的值
		height: 65vh;
		width: 25rpx;
		position: fixed;
		top: 20vh;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		z-index: 999;

		.letter-columns-unit {
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			font-size: 20rpx;
		}

		text {
			font-size: 26rpx;
			z-index: 3;
		}

		.letter-columns-check {
			border-radius: 100rpx;
			color: #ffffff;
			background: $uni-color-primary;
		}
	}

	.appear {
		position: fixed;
		top: 50%;
		left: 70%;
		transform: translate(-50%, -50%);
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
		color: #FFF;
		background: #333;
		opacity: 0.7;
		border-radius: 100rpx;
		z-index: 3;
	}
</style>
